<template>
	<view class="container">
		<view class="navFixed">
			<!-- 这个地方是状态栏高度 -->
			<view :style="{ height: statusBarHeight + 'px' }"></view>
			<!-- 这个地方是导航栏高度 按钮文字胶囊部分 -->
			<view class="navContent" :style="{ height: navBarHeight + 'px', width: searchBoxWidth + 'px' }">	</view>
		</view>
		<!-- 下面就是你开始操作的内容了哦.....开始开发吧 -->
		<view :style="{ paddingTop: statusBarHeight + navBarHeight + 'px' }" class="wrap">
			
			<view class="login-box">
				<view class="title">
					<image src="../../static/tabbar/icon.png" mode="" style="width: 32px;height: 32px;"></image> <text>车辆管理</text>
				</view>
				<view class="info">
					你好，
				</view>
				<view class="info" style="margin-bottom: 32px;">
					欢迎使用车辆管理
				</view>
				<u--form labelPosition="top"  :model="loginForm" :rules="rules" ref="uForm">
					<u-form-item label="账号" prop="account" borderBottom ref="item1">
						<u-input v-model="loginForm.account" border="none" placeholder="请输入账号"></u-input>
					</u-form-item>
					<u-form-item label="密码" prop="password" borderBottom ref="item2">
						<u-input v-model="loginForm.password" border="none" type="password" placeholder="请输入密码"></u-input>
					</u-form-item>
					<u-button type="primary" text="登录" @click="handleLogin"/>
				</u--form>
				
			</view>
		</view>
	</view>
</template>

<script>
import { login } from '@/apis/user.js';
import { removeToken } from '@/utils/auth'
export default {
	data() {
		return {
			loginForm: {
				account: '',
				password: ''
			},
			rules: {
				account: {
					type: 'string',
					required: true,
					message: '请填写账号',
					trigger: ['blur', 'change']
				},
				password: {
					type: 'string',
					required: true,
					message: '请填写密码',
					trigger: ['blur', 'change']
				}
			},
			statusBarHeight: 0,
			navBarHeight: 0,
			searchBoxWidth: 0
		};
	},
	onLoad(options) {
		const info = uni.getSystemInfoSync();
		this.statusBarHeight = info.statusBarHeight;
		this.searchBoxWidth = info.searchBoxWidth;
		// #ifdef MP-WEIXIN
		const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
		this.navBarHeight = menuButtonInfo.bottom - info.statusBarHeight + (menuButtonInfo.top - info.statusBarHeight);
		this.searchBoxWidth = menuButtonInfo.left;
		// #endif
	},
	onReady() {
		this.$refs.uForm.setRules(this.rules); // 初始化校验规则‌:ml-citation{ref="1,2" data="citationList"}
	},
	methods: {
		async handleLogin() {
		
			await removeToken()
			 // this.$refs.uForm.validate(valid => {
			 //        if (valid) {
			 //          uni.showToast({ title: '提交成功' })
			 //          // 此处添加数据提交逻辑
			 //        } else {
			 //          console.log('验证失败')
			 //        }
			 //      })
			// console.log('this.$refs.uForm',this.$refs.uForm.validate)
			// console.log(11111);
			
			// this.$refs.uForm.validateField(valid => {
				// console.log(valid, '校验成功');
				
				if (this.loginForm.account && this.loginForm.password ) {
					const res = await login(this.loginForm)
					if(res?.error) {
						uni.showToast({
							title: '账号密码错误',
							icon: 'error'
						});
						return
					}
						console.log(res);
						this.$store.state.ueserId = res.id
						this.$store.state.name = res.name
						uni.setStorageSync('token_type', 'Bearer ');
						uni.switchTab({
							url: '/pages/index/index'
						});
						// 临时模拟登录成功
						console.log('登录成功');
						uni.showToast({
							title: '登录成功',
							icon: 'success'
						});
					}
					
				
			// });
			
			
		}
	}
};
</script>

<style lang="less" scoped>
.dflex() {
	display: flex;
	justify-content: center;
	align-items: center;
}
.container {
	width: 100%;
	height: 100%;
	.navFixed {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1030;
		width: 100%;
		background-color: #ffffff;
		.navContent {
			.dflex();
			padding: 0 30rpx;
			height: 90rpx;
			box-sizing: border-box;
		}
	}
}
.wrap {
	width: 100%;
	height: 100%;
	background-color: #f4f4f4;
	display: flex;
	justify-content: center;
	align-items: center;
}
.u-form {
	height: 140px;
}
.login-box {
	width: 100%;
	height: 100%;
	background-color: #fff;
	padding:  20px 43px;
	padding-top: 40px;
	border-radius: 10px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.title {
	display: flex;
	align-items: center;
	padding-bottom: 32px;
	text {
		padding-left: 12px;
		font-family: Source Han Sans SC, Source Han Sans SC;
		font-weight: bold;
		font-size: 24px;
		color: #1A3B32;
		line-height: 28px;
		text-align: center;
		font-style: normal;
		text-transform: none;
	}
	
}
.info {
	font-family: Source Han Sans SC, Source Han Sans SC;
	font-weight: bold;
	font-size: 20px;
	color: #333333;
	line-height: 23px;
	text-align: left;
	font-style: normal;
	text-transform: none;
	margin-bottom: 12px;
}
button {
	width: 100%;
	padding: 6px 10px;

	background-color: #007aff;
	color: #fff;
	border: none;
	border-radius: 5px;
	margin-top: 30px;
	font-size: 16px;
	cursor: pointer;
}
</style>
